<template>
  <div class="app-container">
    <el-card shadow="hover">
      <div slot="header" class="clearfix">
        <span>编辑器</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="submitHandle">保存</el-button>
      </div>
      <mavon-editor
        ref="md"
        v-model="value"
        :ishljs="true"
        code-style="gruvbox-dark"
        @imgAdd="uploadImage"
        @imgDel="imgDel"/>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Index',
  data() {
    return {
      value: ''
    }
  },
  methods: {
    submitHandle() {
      console.log(this.value)
    },
    uploadImage(pos, file) {
      // console.log(pos, file)
      var formData = new FormData()
      formData.append('file', file)
      axios({
        url: 'http://api.cloud.cc/common/upload',
        method: 'post',
        data: formData,
        headers: { 'Content-Type': 'multipart/form-data' }
      }).then((url) => {
        const tmp = url.data.data[0].url
        // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
        // $vm.$img2Url 详情见本页末尾
        this.$refs.md.$img2Url(pos, tmp)
      })
    },
    imgDel(pos) {
      console.log(pos)
    }
  }
}
</script>

<style scoped>

</style>
